<template>
  <div class="scroll">
    <example-card title="级联选择器" url="http://element.eleme.io/#/zh-CN/component/cascader">
      <div>
        <el-cascader :options="options" expand-trigger="hover" v-model="selectedOptions" @change="handleChange"/>
      </div>
      <div>
        <el-cascader placeholder="试试搜索：指南" :options="options" filterable change-on-select />
      </div>
      <div>
        <el-cascader placeholder="动态加载次级选项" :options="options2" @active-item-change="handleItemChange" :props="props" />
      </div>
    </example-card>
  </div>
</template>

<script>
  import data from "./data";

  export default {
    name: "ui_cascader_view",
    data() {
      return {
        options: data,
        selectedOptions: [],
        options2: [{
          label: '江苏',
          cities: []
        }, {
          label: '浙江',
          cities: []
        }],
        props: {
          value: 'label',
          children: 'cities'
        }
      };
    },
    methods: {
      handleChange(v) {
        console.log(v);
      },
      handleItemChange(val) {
        console.log('active item:', val);
        setTimeout(() => {
          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {
            this.options2[0].cities = [{
              label: '南京'
            }];
          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {
            this.options2[1].cities = [{
              label: '杭州'
            }];
          }
        }, 300);
      }
    }
  };
</script>

<style scoped>

</style>
